import React, { Component } from 'react';

/* 
  1.组件更新时
  a.setState
  
*/
class App extends Component {

  state={
    msg:"🐂"
  }
  static getDerivedStateFromProps(props,state){
    console.log("1.组件更新App方法")
    return null
  }
  shouldComponentUpdate(nextProps,nextState){
    //false 组件不会更新
    //false 组件会更新
    console.log("2.组件更新 shouldComponentUpdate")
    return true
    // return false
  }
  handleClick =(params) => {
    this.setState({
      msg:"🐖"
    })
  }
  render() {
    console.log("3.组件更新  render函数")
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.handleClick}>变🐖</button>
      </div>
    );
  }
  getSnapshotBeforeUpdate(preProps,preState){
    console.log("4.组件更新 执行getSnapshotBeforeUpdate")
    return null
  }
  componentDidUpdate(){
    console.log("5.组件更新 执行componentDidUpdate")
  }
}

export default App;
